<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮廓与阴影</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}

        .box{
            width: 200px;
            height: 200px;
            margin: 20px;
            background-color: aqua;
            /* 轮廓样式
                作用：给元素设置一个轮廓，展示效果与border类似，但是
                它不可以单独设置某一个方向的颜色
                书写方式：
                outline: color width style

                outline不会占据元素的位置，它仅仅是可见但不会影响元素布局
            */
            /* outline: 2px red solid; */

            /* 元素阴影
                作用：为元素设置一个阴影区域，可以调整阴影大小，和扩散范围
                阴影也不会影响元素布局，只是视觉展示效果
                书写方式
                基础写法：box-shadow:color
                进阶写法：box-shadow:x y color
                完整写法： x y 模糊半径 扩散范围(阴影大小) color
                指定扩散方向：
                outset(向外 默认值，不可设置)
                inser(向内)
            */
            /* box-shadow: 10px 10px black; */
            box-shadow: 10px 10px 10px 1px rgba(50, 271, 12, 0.731);
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>